<!-- 用户资料更新界面： 绑定设置 -->
<template>
  <div id="bind">
    <div class="bindc">
      <!-- 手机icon -->
      <i class="el-icon-mobile-phone"></i>

      <p>
        <span>手机</span>
        <br/>
        <span>使用手机号注册：+86 159****2596</span>
<!--        <el-link type="primary">修改</el-link>-->
      </p>

      <el-button size="medium" @click="dialogVisible = true">修改密码</el-button>
    </div>

    <!-- 对话框-->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" status-icon :rules="rules" label-width="70px" @submi.native.stop>
        <el-form-item prop="newPass" label="新密码 :">
          <el-input v-model.trim="form.newPass" maxlength="16" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="saveNewPass">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "UpdateBind",

  beforeMount() {
    this.user = this.$cookies.get('user');
  },

  data () {
    // 校验密码格式
    let validatePass = (rule, value, callback) => {
      //获得输入密码的长度
      let length = value.length;

      if (length === 0) {
        this.passIsAllow = false;
        callback(new Error('请输入密码'));
      } else if ( !/^[a-zA-Z0-9]+$/.test(value)) {  //若密码 不是 由字母，数字组成
        this.passIsAllow = false;
        callback(new Error('密码由8-16位数字和字母组成，不能使用特殊字符'))
      } else if(length < 8 || length > 16){
        this.passIsAllow = false;
        callback(new Error('密码由8-16位数字和字母组成，不能使用特殊字符'));
      } else if(this.user.pass === value) {
        this.passIsAllow = false;
        callback('新密码与旧密码相同');
      } else {
        this.passIsAllow = true;
        callback();
      }
    };

    return {
      user: null,

      form: {
        newPass: '',
      },

      rules: {
        newPass: { validator: validatePass, trigger: 'blur'},
      },

      // 新密码是否通过验证
      passIsAllow: false,

      // 控制对话框显示 bool
      dialogVisible: false,
    }
  },

  methods: {
    // 保存用户修改后的密码
    saveNewPass () {
      // 如果新密码与旧密码 不相同
      if(this.form.newPass !== this.user.pass) {
        this.user.pass = this.form.newPass;

        // 保存修改后的用户对象
        this.$cookies.set('user', this.user);
        // 将对话框内容清空
        this.form.newPass = '';
        // 关闭对话框
        this.dialogVisible = false;

        this.$message({
          showClose: true,
          message: '修改密码成功',
          type: 'success',
          center: true
        });
      }
    }
  }

}
</script>

<style lang="less" scoped>
#bind {}

.bindc {
  padding: 40px;
  background-color: whitesmoke;

  //手机icon
  .el-icon-mobile-phone {
    font-size: 40px;
  }

  p {
    display: inline-block;
    margin: 0;
    width: 300px;
    height: 40px;

    span:first-child {
      color: #909399;
    }

    span:last-of-type, .el-link {
      font-size: 12px;
    }
  }

  //手机icon
  .el-button {
    float: right;
  }
}
</style>